Ok, here is an example of what you can do using JavaScript. First let me give some insight on what the page does and then the code.
Function:
ShowHideColumn (CommonFieldNamePart, MaxRowNum, obj)
Definition:
{
CommonFieldNamePart} is the beginning part of the “name” that is shared by all of the fields/columns that this function will be updating.
{
MaxRowNum} is number of fields that this function will be updating. If there are three rows in the table then you would pass ‘3’ for the “MaxRowNum” value.
{
obj} Just always pass “this.name“ as the value. In the checkbox properties make sure that the “name” value of the check box is the same as the “CommonFieldNamePart” value.
Note:
For this function to work properly an understanding that all the Columns that are going to be grouped together will need to share in a common name part for each row.
Here is a example of the whole page at work:
-
<html>
-
<head>
-
<title>Example</title>
-
<script type="text/javascript">
-
function ShowHideColumn(CommonFieldNamePart, MaxRowNum, obj)
-
{
-
for (i = 1; i <= MaxRowNum; i++)
-
{
-
if (document.getElementById(obj).checked)
-
{
-
document.getElementById(CommonFieldNamePart + i).style.display='none';
-
}
-
else
-
{
-
document.getElementById(CommonFieldNamePart + i).style.display='';
-
}
-
}
-
}
-
</script>
-
</head>
-
<body>
-
<p>
-
Hide Column A: <input type="checkbox" name="ColumnA" onclick="ShowHideColumn('ColumnA', 2, this.name)"><br />
-
Hide Column B: <input type="checkbox" name="ColumnB" onclick="ShowHideColumn('ColumnB', 2, this.name)"><br />
-
Hide Column C: <input type="checkbox" name="ColumnC" onclick="ShowHideColumn('ColumnC', 2, this.name)"><br />
-
Hide Column D: <input type="checkbox" name="ColumnD" onclick="ShowHideColumn('ColumnD', 2, this.name)">
-
</p>
-
-
<table border="1" bordercolor="#000000">
-
<tr>
-
<td id="ColumnA1">Dane</td>
-
<td id="ColumnB1">Sam</td>
-
<td id="ColumnC1">Ed</td>
-
<td id="ColumnD1">Bill</td>
-
</tr>
-
<tr>
-
<td id="ColumnA2">Jurkovic</td>
-
<td id="ColumnB2">Dawwod</td>
-
<td id="ColumnC2">Kodish</td>
-
<td id="ColumnD2">Chasse’</td>
-
</tr>
-
</table>
-
</body>
-
</html>
-
Hope this helps,
CroCrew~
20
